<template>
  <div :style="{backgroundcolor:'#fff'}">
    <div class="navStem">
      <div
        class="stemInfo"
        v-if="stem[stemIndex]"
      >{{stem[stemIndex].groupName}}-{{stem[stemIndex].gradeName}}-{{stem[stemIndex].subject}}</div>
      <div class="indexTotal">{{stemIndex+1}}/{{stemTotal}}</div>
    </div>
    <div class="changeContainer">
      <!-- 按需引入clock icon -->
      <view class="view-wrap">
        <i-icon class="clockIcon" type="clock" size="25" color="#2e8e9a" />
        <i-count-down
          class="countDown"
          :target="targetTime"
          :clear-timer="clearTimer"
          @callback="myLinsterner"
        ></i-count-down>
      </view>
      <!-- 退出、上一题、下一题、提交容器 -->
      <div class="stemChange">
        <button
          id="exit"
          class="weui-btn weui-btn_mini weui-btn_default"
          @click="exitPrac"
          :style="{color:'#eac49e'}"
        >退出</button>
        <button
          id="last"
          class="weui-btn weui-btn_mini weui-btn_default"
          @click="lastStem"
          :disabled="stemIndex<=0"
          :style="{color:'#2e8e9a'}"
        >上一题</button>
        <!-- disable属性控制临界题目是禁止进行题目切换 下同-->
        <button
          id="next"
          class="weui-btn weui-btn_mini weui-btn_default"
          @click="nextStem"
          :style="{color:'#2e8e9a',display:(stemIndex+1)==stemTotal?'none':'inline-block'}"
        >下一题</button>
        <button
          id="commit"
          class="weui-btn weui-btn_mini weui-btn_default"
          @click="commitAnswer"
          :style="{color:'#2e8e9a',display:(stemIndex+1)==stemTotal?'inline-block':'none'}"
          :disabled="eventFlag"
        >提交</button>
      </div>
    </div>

    <!-- 题目容器 -->
    <view id="problem-Bar">
      <!-- 题干容器 -->
      <view id="stem" v-if="stem[stemIndex]">{{stemIndex+1}}. {{stem[stemIndex].name}}</view>
      <!-- 单选项容器 -->
      <radio-group class="radio-group" v-if="stem[stemIndex]">
        <label
          class="radio"
          v-for="(item,index) in stem[stemIndex].optionList"
          :key="item.id"
          :data-idx="index"
          @click="answerSelect"
        >
          <radio
            color="#2e8e9a"
            :value="item.content"
            :checked="stem[stemIndex].optionList[index].data"
          />
          <!-- 由optionList[index].data判断选中与否 -->
          {{item.content}}
        </label>
      </radio-group>
    </view>

    <view class="foot">
      <!-- 切换 -->
      <view id="switch">
        <switch :checked="tag" @change="switch1Change" color="#2e8e9a" />解析
      </view>
    </view>
    <div
      class="analysis"
      :style="{width:'325px',margin:'0 auto',padding:'0 5px',display:tag?'block':'none',fontSize:'12px'}"
    >
      <i-icon type="brush" size="23" color="#2e8e9a" :style="{paddingRight:'5px'}" /> {{answer[stemIndex]}}
    </div>
    <div class="addWrongSet" @click="addSet">
       <i-icon type="add" size="23" color="#2e8e9a"/>添加到错题集
     </div>
  </div>
</template>

<script>
import HttpKit from '@/utils/http-kit'
import globalStore from "../../stores/global-store";
 const EXAM_LIST_URL = 'http://127.0.0.1:8080/base-in-back-end'
export default {
  data () {
    return {
      stem:[], //存储题目
      answer:[],//存储答案
      targetTime: 0,
      doTime:1800000,//设置做题时间ms
      doingTime:0,
      clearTimer: false,
      tag:false,//开关状态的标志
      stemTotal:4,//题数
      stemIndex:0,//题目下标
      eventFlag:false//提交事件触发标志
    }
  },
  beforeMount(){
     for(var i=0;i<this.stemTotal;i++){
        this.detail(i);
    }
  },
  onLoad(options) {
    Object.assign(this.$data, this.$options.data())//初始化数据
    this.targetTime = new Date().getTime() + this.doTime;//初始化倒计时时间
  } ,
  onshow(){
    var that=this;
    let pages=getCurrentPages();
    let currPage=pages[pages.length-1];
    if(currPage.data.stemIndex){
       that.setData({
      stemIndex:currPage.data.stemIndex
    })
    }
    if(currPage.data.tag){
      thst.setData({
        tag:currPage.data.tag
      })
    }
    // this.onLoad();
  },
  onUnload() {
    this.clearTimer = true
    this.eventFlag=false;
    this.tag=false;
     Object.assign(this.$data, this.$options.data())//初始化数据
    wx.reLaunch({
      url: '/pages/home/main'
    })
  },
  methods: {
    detail (i) {
      HttpKit.post('/wx/answer/stem', {
        groupName: globalStore.state.examType[0],
        gradeName: globalStore.state.examType[1],
        subject: globalStore.state.examType[2],
        tenantId: '753749749386969088'
      })
        .then(res => {
          this.stem.push(res.data.data) // 题目回显
          this.answer.push(this.stem[i].analysis)
        })
        .catch(err => {
        })
    },
    switch1Change(){
      this.tag=!this.tag
    },
    lastStem(){
      this.stemIndex--//控制下标进行题目切换，下同
      this.tag=false;
    },
    nextStem(){
      this.stemIndex++;
      this.tag=false
    },
    answerSelect(e){//记录答案选中状态
      var idx=e.currentTarget.dataset.idx;//传进来的选项下标
      for(var i=0;i<this.stem[this.stemIndex].optionList.length;i++){//对optionList.data进行初始化
        this.stem[this.stemIndex].optionList[i].data=false;//没选中
      }
      if(this.stem[this.stemIndex].optionList[idx].isRight)//正确选项
        this.stem[this.stemIndex].optionList[idx].data='right';//选中的改变data状态
        else if(!this.stem[this.stemIndex].optionList[idx].isRight)
          this.stem[this.stemIndex].optionList[idx].data='wrong';//错误
    },
    commitAnswer(){
      var that=this;
       if(!that.eventFlag){
            wx.showModal({
                title: '',
                content: '确认提交吗？',
                success:function(res) {
              if(res.confirm){
                 that.tag=false;//关闭解析
                 let doingTime=that.targetTime-new Date().getTime();
                 var time=JSON.stringify(doingTime);//剩余时间
                 that.clearTimer = true;//停止计时
                 var time=encodeURIComponent(time);
                 var item =JSON.stringify(that.stem);
                 var stem=encodeURIComponent(item);
                 that.eventFlag=true;
                  wx.navigateTo({
                url: '/pages/practiceScore/main?stem='+stem+'&targetTime='+time
              })
              }
            }
          })
        }
        if(that.eventFlag){
           wx.navigateTo({
                url: '/pages/practiceScore/main'
              })
        }
},
    myLinsterner(){
       if(!this.eventFlag){
          this.tag=false;//关闭解析
          var doingTime=this.targetTime-new Date().getTime();
          var time=JSON.stringify(this.doingTime);//剩余时间
          this.clearTimer = true;//停止计时
          var time=encodeURIComponent(time);
          var item =JSON.stringify(this.stem);
          var stem=encodeURIComponent(item);
          this.eventFlag=true;
      }
        wx.navigateTo({
          url: '/pages/practiceScore/main?stem='+stem+'&targetTime='+time
        })

  },
    exitPrac(){
     wx.reLaunch({
       url: '/pages/practice/main',
       success: function(res){
         // success
       },
       fail: function() {
         // fail
       },
       complete: function() {
         // complete
       }
     })
   },
    addSet(){
        //增加错题
    var tid = this.stem[this.stemIndex].id;
    this.$fly.post(EXAM_LIST_URL + '/common/wrong/add/' + globalStore.state.openId + '/' + tid)
    .then(e => {
      // console.log(e)
    wx.showToast({
    title: "添加成功", // 提示的内容
    icon: "success", // 图标，默认success
    image: "", // 自定义图标的本地路径，image 的优先级高于 icon
    duration: 3000, // 提示的延迟时间，默认1500
    mask: false, // 是否显示透明蒙层，防止触摸穿透
    success: function () {
        console.log("接口调用成功的回调函数");
    },
    fail: function () {
        console.log("接口调用失败的回调函数");
    },
    complete: function () {
        console.log("接口调用结束的回调函数（调用成功、失败都会执行）");
    }
})
    })
    .catch(err => {
    })
    }
}
}
</script>

<style scoped lang="less">
/* less预编译 */
.navStem {
  margin: 0 auto;
  height: 30px;
  line-height: 30px;
  padding: 0 30px;
  background-color: #2e8e9a;
  .stemInfo {
    color: #fff;
    float: left;
  }
  .indexTotal {
    color: #fff;
    float: right;
  }
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}
.changeContainer {
  margin: 0 auto;
  width: 325px;
  line-height: 55rpx;
  border-bottom: 1px solid #dedede;
  box-shadow: 0px 2px 1px #dedede;
  .view-wrap {
    float: left;
    height: 55rpx;
    vertical-align: middle;
    line-height: 42.5rpx;
    .countDown {
      display: inline-block;
    }
  }
  &::after {
    /* 消除浮动带来的高度塌陷 */
    content: "";
    display: block;
    clear: both;
  }
  .stemChange {
    float: right;
    #exit,
    #last,
    #next,
    #commit {
      transform: scale(0.8);
    }
  }
}
#problem-Bar {
  width: 325px;
  margin: 0 auto;
  clear: left;
  margin-bottom: 5rpx;
  padding: 5px 5px;
  box-sizing: border-box;
  box-shadow: 0px 2px 1px #dedede;
  .radio-group .radio {
    display: block;
  }
}
.foot {
  width: 325px;
  margin: 0 auto;
  box-shadow: 0px 2px 1px #dedede;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  #switch {
    float: left;
    font-size: 14px;
    switch {
      // display: inline-block;
      transform: scale(0.6);
    }
  }
}
.analysis {
  width: 325px;
  margin: 0 auto;
  display: flex;
  box-sizing: border-box;
  box-shadow: 0px 2px 1px #dedede;
}
.addWrongSet{
  width: 325px;
  margin: 0 auto;
  line-height: 50rpx;
  box-sizing: border-box;
  box-shadow: 0px 2px 1px #dedede;
  }
</style>
